<style>
.l-map{
	width:320px;
	height:320px;
}
</style>
<div id="l-map" class="l-map"></div>
<div id="r-result"></div>
<script type="text/javascript">
var map = new BMap.Map("l-map");

var a = parseFloat("{$detail.longitude}");
var b = parseFloat("{$detail.latitude}");
var c = parseFloat("{$result.pointlng}");
var d = parseFloat("{$result.pointlat}");
var p1 = new BMap.Point(a,b); //餐厅地址
var p2 = new BMap.Point(c,d);  //用户地址
//map.centerAndZoom(p1, 12);
//map.centerAndZoom(p2, 12);
//map.setCenter("北京");

map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}));
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));

var output = "";
var searchComplete = function (results){
	
	if (driving.getStatus() != BMAP_STATUS_SUCCESS){
        return false;
    }
	var plan   = results.getPlan(0);
    $("#juli1").html(plan.getDistance(true));
    $("#juli2").html(plan.getDistance(true));
}
//var viewport = map.getViewport();
//alert(viewport.center.lng+","+viewport.center.lat+","+viewport.zoom);
var driving = new BMap.DrivingRoute(map, {
				renderOptions:{map: map,enableDragging : true,autoViewport:true},//, autoViewport: true
	onSearchComplete: searchComplete,
	onPolylinesSet: function(){
		map.setViewport([p1,p2]);
		map.centerAndZoom(p1, 11);
		//map.centerAndZoom(new BMap.Point(c,d), 11);
	}
});
driving.search(p1, p2);
//driving.enableAutoViewport();
//driving.setLocation(new BMap.Point({$detail.longitude},{$detail.latitude})) ;
/**/

</script>
